<template>

  <div class="card_box">
    <div class="flex card_flex">
      <div class="title">
        利润分布柱状图
        <span class="date-range">{{ formatDateRange }}</span>

      </div>
     
    </div>
    <div id="tuiguagChartsline3"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import EleResize from '@/utils/esresize';

export default {
  name: "",
   props: {
      formatDateRange:{
       type: [Array, String],
      default: () => []
    },
    chartData: {
      type: Object,
      default: () => ({
        xData: [],
        quantityList: [],
        amountList: [],
        orderCountList: []
      })
    }
  },
 
  data() {
    return {
      myChart1: null,
      formData:{}
    };
  },
  
  watch: {
    chartData: {
      handler(newData,oldData) {
        if (newData && this.myChart1) {
            this.myChart1.dispose();
            this.myChart1 = null;
           this.echartsInit()
        }
      },
      deep: true,
      immediate:true
    }
  },
  created() {
    this.echartsInit()
  },

  methods: {
    echartsInit() {
       this.$nextTick(() => {
      var chartDom = document.getElementById("tuiguagChartsline3");
      this.myChart1 = echarts.init(chartDom);
       window.onresize = ()=> {
        this.myChart1.resize()
       }
     this.initCharts1()
    });
    },

    // 更新图表数据的方法
    updateChartData(chartData) {
      if (chartData && chartData.xData) {
        this.initCharts1(chartData);
      }
    },
  

    initCharts1(chartData = null) {
      // 使用传入的数据或 props 中的数据
      const data = chartData || this.chartData;
      const xData = data.xData || [];
      const quantityList = data.quantityList || [];
      const amountList = data.amountList || [];
      const orderCountList = data.orderCountList || [];
      const showDataZoom = xData.length > 15; // 当数据点超过15个时显示滚动条
       
      const colors = [
        "rgb(255, 228, 128)",   // 数量-绿色
        "rgb(52, 120, 246)",   // 金额-蓝色
        "#6c5dd3" // 订单数量-紫色
      ];
      let option = {
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff",
          borderColor: "#eee",
          borderWidth: 1,
          textStyle: { color: "#333" },
            axisPointer: {
          type: 'shadow',
          shadowStyle: {
            color: 'rgba(145, 145, 145, 0.3)',
          },
        },
          formatter: (params) => {
            let str = params[0].axisValue + "<br/>";
            params.forEach(item => {
              str += `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background:${item.color}"></span>`;
              str += `${item.seriesName}: <b>${item.value}</b><br/>`;
            });
            return str;
          }
        },

        color: colors,
        legend: {
          itemHeight: 10,
          itemWidth: 16,
          data: [
            { name: "总利润", textStyle: { color: colors[0] }, icon: 'roundRect' },
            { name: "平均利润", textStyle: { color: colors[1] }, icon: 'roundRect' },
            { name: "订单数量", textStyle: { color: colors[2] }, icon: 'roundRect' }
          ],
          top: 10,
          left: "center"
        },
        grid: { left: 50, right: 50, top: 50, bottom: 46 },
        dataZoom: showDataZoom ? [
          {
            type: 'slider',
            start:0,//默认为0
            startValue:0,
            endValue:40,
            end: Math.min(100, (20 / xData.length) * 100), // 固定显示15个数据点
            xAxisIndex: [0],
            handleSize: 0,//滑动条的 左右2个滑动条的大小
            height: 10,//组件高度
            bottom: 0,//右边的距离
            borderColor: "#e3e3e3",
            fillerColor: 'rgb(97, 105, 224)',
            borderRadius:16,
            zoomLock: true, 
             brushSelect: false, // 是否开启刷选功能，可以理解为拖拽区域的宽度
            backgroundColor: '#e3e3e3',//两边未选中的滑动条区域的颜色
            showDataShadow: false,//是否显示数据阴影 默认auto
            showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
          
            filterMode: 'filter',
            zlevel:-10,

          },
          {
            type: 'inside',
            xAxisIndex: [0],
            zoomOnMouseWheel:false, //滚轮不触发缩放
            moveOnMouseMove:true,   //鼠标移动触发平移
            moveOnMouseWheel:true,  //鼠标滚轮触发平移

          }
        ] : [],
        xAxis: {
          type: "category",
          data: xData,
          axisLine: { lineStyle: { color: "#EAEBF0" } },
          axisLabel: { color: "#333" }
        },
        yAxis: [
          {
            type: "value",
            name: "单位(元)",
            position: "left",

            axisLine: { lineStyle: { color: "#f1f1f1" } }, // 轴线颜色
            axisLabel: { color: "rgb(39, 174, 96)" }, // 刻度文字颜色
            nameTextStyle: { color: "rgb(39, 174, 96)" }, // y轴名称颜色
            splitLine: { lineStyle: { color: "#EAEBF0", type: "dotted" } },
              max: function(value) {
                 return Math.floor(value.max * 1.1);
            }
          },
          {
            type: "value",
            name: "单位(单)",
            position: "right",
            axisLine: { lineStyle: { color: "#f1f1f1" } }, // 轴线颜色
            axisLabel: { color: "rgb(52, 120, 246)" },
            nameTextStyle: { color: "rgb(52, 120, 246)" },
            splitLine: { show: false },
            max: function(value) {
               return Math.floor(value.max * 1.1);
            }
          }
        ],
        series: [
          {
            showSymbol: false,
            name: "总利润",
            type: "bar",
            yAxisIndex: 0,
            barWidth: 14,
            itemStyle: {
              normal: {
                barBorderRadius: [6, 6, 0, 0]
              },
            },
            smooth: true,
            data: quantityList,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "rgba(112, 226, 201)" },
                { offset: 1, color: "rgba(205, 233, 255)" }

              ])
            }
          },
          {
            showSymbol: false,
            name: "平均利润",
            type: "bar",
            yAxisIndex: 0,
            smooth: true,
            barWidth: 14,
            itemStyle: {
              normal: {
                barBorderRadius: [6, 6, 0, 0]
              },


            },
            data: amountList,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(152, 184, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(205, 233, 255)'
                }
              ])
            }
          },
          {
            name: "订单数量",
            type: "line",
            yAxisIndex: 1,
            showSymbol: true,
            symbol: 'circle',
            symbolSize: 8,
            lineStyle: {
              color: '#6c5dd3',
              width: 3
            },
            smooth: true,
            itemStyle: {
              color: '#6c5dd3',
              borderColor: '#fff',
              borderWidth: 2
            },
            data: orderCountList,
            z: 10
          }
        ]
      };
      this.myChart1 && this.myChart1.setOption(option);
    },
  },
    beforeDestroy() {
    // 销毁图表实例
    if (this.myChart1) {
      this.myChart1.dispose();
      this.myChart1 = null;
    }
  },
};
</script>

<style scoped lang="scss">
.title {
  font-size: 16px;
  font-weight: 600;
  color: #222;

  .date-range {
    font-size: 13px;
    color: #888;
    margin-left: 8px;
  }
}

.card_box {
  margin-top: 16px;
  padding: 0 24px 12px 24px;
  position: relative;

  .flex {}

  .time_box {}
}

#tuiguagChartsline3 {
  width: 100%;
  height: 450px;
}

.timers {
  font-size: 14px;
  margin-right: 6px;
}

.card_flex {
  justify-content: space-between;
  align-items: center;
}
</style>
